<template>
  <div class="my-follow-wrapper">
    <!--
    <ul class="tags-tab">
      <li @click="switchActive(0)" :class="['tag-item', 'tag-align-center', activeIndex == 0 ? 'tag-selected' : '']">问答</li>
      <li @click="switchActive(1)" :class="['tag-item', 'tag-align-center', activeIndex == 1 ? 'tag-selected' : '']">点评师</li>
    </ul>
    -->
    <van-pull-refresh v-model="isRefreshing">
    <!--
    <template v-if="activeIndex == 0">
    <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="400" class="question-wrapper">
      <li v-for="(item, index) in dataList[activeIndex].results" @click="viewQuestionDetail(index)" class="question-info-item">
        <div class="question-header">
          <img class="avatar" :src="item.asker.avatar" alt="" />
          <span class="name">{{ item.asker.nickname }}</span>
          <span class="price">￥{{ item.reward }}</span>
        </div>
        <div class="question-content">
          <div class="question-desc dianping-type">
            <p class="question-text">{{ item.text }}</p>
            <div class="question-tags">
              <span v-if="item.catalog" class="tag-item">{{ item.catalog.name }}</span>
            </div>
          </div>
          <div v-if="item.attachments.length" class="question-painting">
            <img :src="item.attachments[0]" alt="">
          </div>
        </div>
      </li>
    </ul>
    <blank-content v-if="!dataList[activeIndex].results.length" text="暂无问答"></blank-content>
    </template>
    -->
    <template v-if="activeIndex==1">
    <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="400" class="master-list-wrapper">
      <li v-for="(item, index) in dataList[activeIndex].results" @click="viewMasterDetail(index)" class="master-info-item">
        <div class="avatar-wrapper">
          <img class="avatar-image" alt="" :src="item.avatar" />
          <div class="level-wrapper">
            <p>{{ item.level.name[0] }}</p>
          </div>
        </div>
        <div class="info-wrapper">
          <div class="info-content">
            <p class="name">{{ item.realname }}</p>
            <span class="info">{{ item.title }}</span>
            <p class="info"> {{ item.answer_count }}回答 &nbsp;&nbsp; {{ item.fans_count }}粉丝</p>
          </div>
        </div>
        <div class="info-button-wrapper">
          <div @click.stop="askQuestion(index, $event)" class="action-btn btn-yellow">请教</div>
        </div>
      </li>
    </ul>
    <blank-content v-if="!dataList[activeIndex].results.length" text="暂无点评师"></blank-content>
    </template>
    </van-pull-refresh>
    <footer-bar page="follow"></footer-bar>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import FooterBar from '@/components/footerBar'
import BlankContent from '@/components/blankContent'

import Waterfall from '@/components/vant/waterfall'

import { mapGetters } from 'vuex'

Vue.component(FooterBar.name, FooterBar)
Vue.component(BlankContent.name, BlankContent)

export default {
  name: 'Follow',
  data () {
    return {
      activeIndex: 1,
      isRefreshing: false,
      disabled: true,
      dataList: [{ results: [] }, { results: [] }]
    }
  },
  created () {
    this.getData()
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    isRefreshing() {
      if (this.isRefreshing) {
        this.refreshData()
      }
    }
  },
  directives: {
    WaterfallLower: Waterfall('lower')
  },
  methods: {
    switchActive(index) {
      this.activeIndex = index
      var data = this.dataList[index]
      if (!data.results.length) {
        this.getData()
      }
    },
    refreshData() {
      var that = this
      this.dataList[this.activeIndex] = { results: [] }
      this.getData(null, function() {
        that.isRefreshing = false
      })
    },
    loadMoreData() {
      var data = this.dataList[this.activeIndex]
      if (data.next) {
        this.getData(data.next)
      }
    },
    getData(next=null, callback=null) {
      var params = {}
      var url = ''
      if (next) {
        url = next
      } else {
        if (!this.activeIndex) {
          url = '/dianping/question/feeds/'
        } else {
          url = '/users/followee/'
        }
      }
      this.$toast.loading()
      var data = this.dataList[this.activeIndex]
      var that = this
      // 调用登陆接口
      this.axios.post(url, qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        console.log(res.data)
        if (res.status === 200) {
          data.count = res.data.count
          data.next = res.data.next
          data.previous = res.data.previous
          data.results = data.results.concat(res.data.results)
        }
        if (callback) {
          return callback()
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
    viewQuestionDetail(index) {
      var question = this.dataList[this.activeIndex].results[index]
      this.$router.push({ name: 'questionDetail', params: { question: question, id: question.id }})
    },
    viewMasterDetail(index) {
      var master = this.dataList[this.activeIndex].results[index]
      if (this.userInfo.id == master.id) {
        return this.$toast('不能向自己请教')
      }
      var params = { master: master, id: master.id }
      this.$router.push({ name: 'masterDetail', params: params })
    },
    askQuestion(index, event) {
      var master = this.dataList[this.activeIndex].results[index]
      this.$router.push({ name: 'questionRelease', params: { type: 2,  master: master }})
      event.cancelBubble = true
    }
  }
}

</script>

<style lang="scss" scoped>

.my-follow-wrapper {
  margin-bottom: 3rem;
}
</style>
